<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
          </el-breadcrumb>
          <!-- 卡片视图区 -->
          <el-card>
              <el-button type="primary"    >添加角色</el-button>
              <el-table :data='RoleList'  border stripe >
                  <!-- 展开列 -->
                  <el-table-column type='expand'>
                      <template slot-scope='scope'>
                          <el-row  v-for='(item1,il) in scope.row.children' :key='item1.id'>
                              <!-- 渲染一级权限 -->
                              <el-col :span='5'>
                                  <el-tag closable @close='removeRightById(scope.row,item1.id)'>
                                  {{item1.authName}}
                                  </el-tag>
                                  <i class="el-icon-caret-right"></i>
                              </el-col>
                              <!-- 渲染二级和三级权限 -->
                              <el-col :span='19'>
                                  <!-- 通过for循环 嵌套渲染二级权限   -->
                                <el-row  v-for='(item2,i2) in item1.children' :key='item2.id'>
                                    <!-- 三级权限 -->
                                    <el-col :span='6'>
                                        <el-tag closable @close='removeRightById(scope.row,item2.id)' type='success'>{{item2.authName}}</el-tag>
                                        <i class="el-icon-caret-right"></i>
                                    </el-col>
                                    <el-col :span='18'>
                                                <el-tag closable @close='removeRightById(scope.row,item3.id)' type='warning'  v-for='(item3,i3) in item2.children' :key='item3.id'>{{item3.authName}}</el-tag>
                                    </el-col>
                                  </el-row>
                              </el-col>
                          </el-row>
                         <pre> </pre>
                      </template>

</el-table-column>
<!-- 索引列 -->
<el-table-column type='index'>
</el-table-column>
<el-table-column label='角色名称' prop='roleName'>
</el-table-column>
<el-table-column label='角色描述' prop='roleDesc'>
</el-table-column>
<el-table-column label='操作'>
    <template slot-scope='scope'>
                          <el-button type='primary' icon='el-icon-edit' size='mini'>编辑</el-button>
                          <el-button type='danger' icon='el-icon-delete' size='mini'>删除</el-button>
                          <el-button type='warning' icon='el-icon-setting' size='mini' @click='showSetRightDiaLog(scope.row)'>分配权限</el-button>
                      </template>

</el-table-column>
</el-table>
</el-card>
<!-- 分配权限对话框 -->
<el-dialog title="分配权限" :visible.sync="setRightDialogVisible " width="50%" @close='setRightDialogClosed'>
    <!-- 树形控件 -->
    <el-tree ref='treeRef' :default-checked-keys='defkeys' :data="rightsList" :props="treeProps" show-checkbox node-key='id' default-expand-all>

    </el-tree>
    <span slot="footer" class="dialog-footer">
    <el-button @click="setRightDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click='allotRights'>确 定</el-button>
  </span>
</el-dialog>
</div>
</template>

<script>
    export default {
        data() {
            return {
                // 获取说有角色的列表
                RoleList: [],
                // 控制分配权限对话框的显示与隐藏
                setRightDialogVisible: false,
                // 所有权限的数据
                rightsList: [],
                // 树形控件的属性绑定对象
                treeProps: {
                    label: 'authName',
                    children: 'children'
                },
                // 默认选中的的节点ID数组
                defkeys: [],
                // 当前即将分配权限的角色id
                roleId: ''
            }
        },
        created() {
            this.getRoleList()
        },
        methods: {
            async getRoleList() {
                const {
                    data: res
                } = await this.$http.get('roles')
                console.log(res);
                if (res.meta.status == 200) {
                    this.RoleList = res.data
                } else {
                    this.$message.error(res.meta.msg)
                }
            },
            // 根据id删除对应的权限
            async removeRightById(role, rightId) {
                const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err)

                if (confirmResult !== 'confirm') {
                    return this.$message.info('取消了删除')
                }
                console.log(role.id);
                console.log(rightId);
                const {
                    data: res
                } = await this.$http.delete(`roles/${role.id}/rights/${rightId}`)
                console.log(res);
                if (res.meta.status !== 200) {
                    return this.$message.error(res.meta.msg)
                }
                role.children = res.data
            },
            // 展示分配权限的对话框
            async showSetRightDiaLog(role) {
                this.roleId = role.id
                    // 获取所有权限的数据
                const {
                    data: res
                } = await this.$http.get('rights/tree')
                if (res.meta.status !== 200) {
                    return this.$message.error(res.meta.msg)
                }
                // 获取到的权限数据保存到data中
                this.rightsList = res.data
                console.log(this.rightslist);
                // 递归获取三级节点的ID
                this.getLeafKeys(role, this.defkeys)
                this.setRightDialogVisible = true
            },
            // 通过递归的形式，获取角色下所有三级权限的id，并保存到defkeys数组中
            getLeafKeys(node, arr) {
                // 如果当前node节点不包含children属性，则是三级节点
                if (!node.children) {
                    return arr.push(node.id)
                }
                node.children.forEach(item => {
                    this.getLeafKeys(item, arr)
                });
            },
            // 监听分配权限对话框的关闭状态
            setRightDialogClosed() {
                this.defkeys = []
            },
            // 点击为角色分配权限
            async allotRights() {
                const keys = [
                    ...this.$refs.treeRef.getCheckedKeys(),
                    ...this.$refs.treeRef.getHalfCheckedKeys()
                ]
                const idStr = keys.join(',')
                const {
                    data: res
                } = await this.$http.post(`roles/${this.roleId}/rights`, {
                    rids: idStr
                })
                if (res.meta.status !== 200) {
                    return this.$message.error(res.meta.msg)
                }

                this.$message.success('分配权限成功！')
                this.getRoleList()
                this.setRightDialogVisible = false

            }
        }

    }
</script>

<style lang="less" scoped>
    .el-tag {
        margin: 7px;
    }
    
    body {
        margin: 0px;
        padding: 0px;
    }
    
    .vcenter {
        display: flex;
        align-items: center;
    }
</style>